<template>
  <div class="common_wrap">
    <div class="common_title">
      新建/编辑
      <div class="back_btn" @click="goBack"><i></i><span>返回</span></div>
    </div>
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item prop="type" label="类型：">
        <el-radio-group
          v-model="type"
          @change="changeType"
          :disabled="empId != ''"
        >
          <el-radio
            v-for="item in typeList"
            :key="item.index"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="name"
        label="人员："
        :rules="[{ required: true, message: '选择人员', trigger: 'change' }]"
      >
        <el-select
          v-model="dynamicValidateForm.name"
          filterable
          clearable
          @change="getArea"
          :disabled="empId != ''"
        >
          <el-option
            v-for="(item, index) in personList"
            :key="index"
            :label="item.empName"
            :value="item.empId"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="area" label="管辖区域：">
        <el-input v-model="area" maxlength="64" disabled style="width: 220px" />
      </el-form-item>
      <!-- <el-form-item prop="area" label="分管工作：" v-if="type == 0">
        <el-input
          type="textarea"
          v-model="dynamicValidateForm.workTask"
          maxlength="255"
          style="width: 440px"
        />
      </el-form-item> -->
      <el-form-item label="负责指标：" v-show="type != '2'">
        <el-table
          ref="table"
          class="input_table"
          border
          :data="quotaList"
          style="width: 550px"
        >
          <el-table-column
            prop="quotaId"
            label="指标ID"
            align="center"
            width="100"
          />
          <el-table-column prop="quotaName" label="指标名称" align="center" />
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <span
                @click="selectQuota(scope.row.quotaId)"
                class="select_btn"
                :class="
                  selectQuotaList.indexOf(scope.row.quotaId) > -1
                    ? 'disabled'
                    : ''
                "
                >{{
                  selectQuotaList.indexOf(scope.row.quotaId) > -1
                    ? "取消选择"
                    : "选择"
                }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "personMaintainIndex",
  data() {
    return {
      type: "0",
      area: "",
      dynamicValidateForm: {
        name: "",
        workTask: "",
      },
      typeList: [
        { label: "责任领导", value: "0" },
        { label: "主要领导", value: "1" },
        { label: "市管领导", value: "2" },
      ],
      personList: [],
      quotaList: [],
      empId: "",
      selectQuotaList: [],
    };
  },
  created() {
    const query = this.$route.query;
    this.dynamicValidateForm.workTask = query.workTask;
    this.getAllQuotaList();
    if (query.empId) {
      this.empId = query.empId;
      this.type = query.level + "";
      this.area = query.areaName;
      this.dynamicValidateForm.name = query.empName;
      this.getQuotaList(query.empId);
    } else {
      this.empId = "";
      this.getPersonList();
    }
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    changeType() {
      this.dynamicValidateForm.name = "";
      this.getPersonList();
    },
    getPersonList() {
      const params = {
        level: this.type,
        index: 1,
        limit: 9999,
      };
      this.$api.employeeList(params).then((res) => {
        if (res.status === 200) {
          this.personList = res.data.data.items;
        } else {
          this.personList = [];
        }
      });
    },
    getArea(params) {
      const arr = this.personList.filter((item) => {
        return item.empId == params;
      });
      this.area = arr[0].areaName || "";
      this.getQuotaList(params);
    },
    getAllQuotaList() {
      const params = {
        page: 1,
        limit: 9999,
      };
      this.$api.quotaList(params).then((res) => {
        if (res.status === 200) {
          this.quotaList = res.data.items;
        } else {
          this.quotaList = [];
        }
      });
    },
    getQuotaList(id) {
      const params = {
        empId: id,
      };
      this.$api.getQuotaByEmpId(params).then((res) => {
        if (res.data.errno === 200) {
          this.selectQuotaList = res.data.data.map((item) => {
            return item.quotaId;
          });
        } else {
          this.quotaList = [];
        }
      });
    },
    open(id) {
      this.$confirm("已有责任领导，是否继续选择?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.selectQuotaList.push(id);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            quotaList: this.selectQuotaList,
            empId: this.empId || this.dynamicValidateForm.name,
            workTask: this.dynamicValidateForm.workTask,
          };
          console.log(params);
          this.$api.saveEmployee(params).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("提交成功");
              setTimeout(() => {
                history.go(-1);
              }, 1500);
            } else {
              this.$message.error("提交失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    selectQuota(id) {
      const index = this.selectQuotaList.indexOf(id);
      if (index > -1) {
        this.selectQuotaList.splice(index, 1);
      } else {
        this.open(id);
      }
    },
  },
};
</script>

<style scoped>
.select_btn {
  color: #66b1ff;
  cursor: pointer;
}
.select_btn.disabled {
  color: #c0c4cc;
}
</style>